<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>员工列表</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet"
	href="<%=path%>/lib/bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="<%=path%>/lib/jquery-1.8.1.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/css/xcConfirm.css" />
<script src="<%=path%>/js/xcConfirm.js" type="text/javascript"
	charset="utf-8"></script>
<style type="text/css">
	.input{
		
	}
</style>

</head>

<body>
	<!-- 新建用户 start -->
	<div class="modal fade" id="user-modal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">员工信息</h4>
				</div>
				<!-- 表单区域 start -->
				<center><h5>基本信息</h5></center>
				<div class="modal-body">
				<form class="form-inline" id="user_form" action="#" method="post">
					<table class="table">
						<tr>
							<td>
								<!-- 用户名 必填项 -->
								<div class="form-group">
									<label class="sr-only" for="name" >用户名</label> 
									<input type="text" class="form-control" id="name" name="name" placeholder="用户名" style="width: 220px;height:29px">
								</div>
							</td>
							<td>
								<!-- 邮箱 必填项 -->
								<div class="form-group">
									<label class="sr-only" for="email">Email/邮箱</label> 
									<input type="email" class="form-control" id="email" name="email" placeholder="Email/邮箱" style="width: 220px;height:29px">
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<!-- 密码 必填项 -->
								<div class="form-group">
									<label class="sr-only" for="password">密&nbsp;&nbsp;&nbsp;&nbsp;码</label> 
									<input type="password" class="form-control form-group-lg" id="password" name="password" placeholder="密码" style="width: 220px;height:29px">
								</div>
							</td>
							<td>
								<!-- 性别 必选项-->
								<div class="form-group">
									<label class="sr-only" for="sex">性&nbsp;&nbsp;&nbsp;&nbsp;别 </label><br/>
									<label class="radio-inline"> <input type="radio"name="sex" id="boy" value="男" checked="checked">男</label> 
									<label class="radio-inline"> <input type="radio" name="sex" id="girl" value="女">女</label>
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<!-- 地址 必填项 -->
								<div class="form-group">
									<label class="sr-only" for="addres">地&nbsp;&nbsp;&nbsp;&nbsp;址</label><br/>
									<input type="text" class="form-control" id="addres" name="addres" placeholder="地址" style="width: 220px;height:29px">
								</div>
							</td>
							<td>
								<!-- 手机或座机号码 必填选-->
								<div class="form-group">
									<label class="sr-only" for="phone">联系方式</label><br/>
									<input type="text" class="form-control" id="phone" name="phone" placeholder="手机或座机号码" style="width: 220px;height:29px">
								</div>
							</td>
						</tr>
						<tr>
							<td>
								<!-- 证件类型 必填选-->
								<div class="form-group">
									<label class="sr-only" for="idType">证件类型</label><br/>
									<select name="idType.idTypeId" id="idType">
										<option value="0">请选择</option>
									</select>
								</div>
							</td>
							<td>
								<!-- 身份证  必填项 -->
								<div class="form-group">
									<label class="sr-only" for="identity">证件号码</label><br/>
									<input type="text" class="form-control" id="identity" name="identity"  placeholder="证件号码" style="width: 220px;height:29px" disabled="disabled">
								</div>
							</td>
						</tr>
					<tr>
						<td>
							<div class="form-group" style="width: 93%">
								<label class="sr-only" for="reamark">状态</label><br/>
								<select name="userStatu.userStatuId" id="userStatu">
									<option value="2">考核</option>
									<option value="1">正式</option>
									<option value="3">离职</option>
								</select>
							</div>
						</td>
						<td colspan="2">
							<div class="form-group" style="width: 93%">
								<label class="sr-only" for="reamark">备注</label><br/>
								<textarea class="form-control" name="reamark" id="reamark" rows="1" style="width: 94%"></textarea>
							</div>
						</td>
					</tr>
					<tr>
						<td colspan="100%">
							<center><h5>职位信息</h5></center>
						</td>
					</tr>
					<tr>
						<td>
							<div class="form-group" style="width: 93%">
								<label class="sr-only" for="dept">所属部门</label><br/>
								<select name="dept" id="dept" name="dept">
										<option value="0">请选择</option>
								</select>
							</div>
						</td>
						<td>
							<div class="form-group" style="width: 93%">
								<label class="sr-only" for="position">职位</label><br/>
								<select name="position.positionId" id="position" disabled="disabled">
										<option value="0">请选择</option>
								</select>
							</div>
						</td>
					</tr>
					</table>
					<input type="hidden" name="userId" id="userId"/>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="submit_user_form">提交</button>
				</div>
				<!-- 表单区域 end -->
			</div>
		</div>
	</div>
	<!-- 新建用户 end -->
	<h2 style="padding: 5%;">员工列表</h2>
	<div class="container" style="width: 88%">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<input type="text" class="search-query" name=""
					placeholder="输入角色类型 / 角色名称" style="height: 3%;" /> <input
					type="button" class="btn btn-primary" name="" value="查询"/>
				<button class="btn btn-success btn-lg" data-toggle="modal" data-target="#user-modal" id="add">增加员工</button>
				<table class="table table-hover table-layout:fixed">
					<thead>
						<tr>
							<th>编号</th>
							<th>姓名</th>
							<th>密码</th>
							<th>性别</th>
							<th>地址</th>
							<th>证件类型</th>
							<th>身份证</th>
							<th>手机</th>
							<th>职位</th>
							<th>邮箱</th>
							<th>员工状态</th>
							<th>入职时间</th>
							<th>备注</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${users }" var="user" varStatus="col">
							<tr class="${col.count%2==0?'':'info' }">
								<td>${user.userId }</td>
								<td>${user.name }</td>
								<td>${user.password }</td>
								<td>${user.sex }</td>
								<td>${user.addres }</td>
								<td>${user.idType.idName }</td>
								<td>${user.identity }</td>
								<td>${user.phone }</td>
								<td>${user.position.pname }</td>
								<td>${user.email }</td>
								<td>${user.userStatu.statu }</td>
								<td>${user.entryTime }</td>
								<td>${user.reamark }</td>
								<td>
								<%-- <a class="btn btn-warning update" onclick="getId(${user.userId})">修改</a> --%>
								<button class="btn btn-warning update update-user" data-toggle="modal" data-target="#user-modal"  onclick="getEmail('${user.email }')">修改</button>
									<%-- <button class="btn btn-danger delete" id="delete${user.userId}">删除</button> --%>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<!-- 分页 start -->
				<ul class="pager">
						  <li class="previous ${pageNo==1?'disabled':''}">
							  <c:if test="${pageNo==1}">
							  	<a>上一页</a>
							  </c:if>
							  <c:if test="${pageNo!=1}">
							  	<a href="userList.action?pageNo=${pageNo-1 }">上一页</a>
							  </c:if>
						  </li>
						  
						  <li style="text-align: center;">${pageNo}</li>
						  
						  <li class="next ${users.size()%pageSize!=0?'disabled':''}">
							  <c:if test="${users.size()%pageSize!=0}">
							  		<a>下一页</a>
							  </c:if>
							  <c:if test="${users.size()%pageSize==0}">
							  		<a href="userList.action?pageNo=${pageNo+1 }">下一页</a>
							  </c:if>
						  </li>
				</ul>
				<!-- 分页 end -->
				<script type="text/javascript">
					var idTypeCount = 0;
					var deptCount = 0;
					//将数据绑定到证件类型
					function bindIdType(){
						$("#idType").html("<option value='0'>请选择</option>");
						$.ajax({
							type:"post",
							url:"idTypeList.action",
							async:false,
							success:function(data){
								 for(var i=0;i<data.length;i++){
									 var option="<option value=\""+data[i].idTypeId+"\"";
									 option += ">"+data[i].idName+"</option>";  //动态添加数据
									 $("#idType").append(option); 
								 }
								 idTypeCount++;
							},
							error:function(){
								alert("服务器好像开小差了,再试试吧-_-");
							}
						});
					}
					//绑定部门数据
					function bindDept(){
						$("#dept").html("<option value='0'>请选择</option>");
						$.ajax({
							type:"post",
							url:"deptList.action",
							async:false,
							success:function(data){
								 for(var i=0;i<data.length;i++){
									 var option="<option value=\""+data[i].deptId+"\"";
									 option += ">"+data[i].dname+"</option>";  //动态添加数据
									 $("#dept").append(option); 
									 deptCount++;
								 }
							},
							error:function(){
								alert("服务器好像开小差了,再试试吧-_-");
							}
						});
					}
					//绑定职位数据
					function bindPosition(deptId){
						$("#position").html("");
						 $.ajax({
								type:"post",
								url:"positionList.action",
								data:{"deptId":deptId},
								async:false,
								success:function(data){
									if(data==null||data==""){
										$("#position").html("<option value='0'>没有可选职位</option>");
										$("#position").attr("disabled",'disabled');
									}
									 for(var i=0;i<data.length;i++){
										 var option="<option value=\""+data[i].positionId+"\"";
										 option += ">"+data[i].pname+"</option>";  //动态添加数据
										 $("#position").append(option); 
										 deptCount++;
									 }
								},
								error:function(){
									alert("服务器好像开小差了,再试试吧-_-");
								}
							});
					}
					$(function(){
						//点击证件类型时
						$("#idType").click(function(){
							if(idTypeCount!=0)return;
							
							bindIdType();
						});
						
						//选中证件类型时证件号码显示可用
						$("#idType").change(function(){
								var idTypeId=$(this).val();
								if(idTypeId!=0){
									$("#identity").removeAttr("disabled");
								}else{
									$("#identity").attr("disabled","disabled");
								}
							});
						//选中部门时
						$("#dept").click(function(){
							if(deptCount!=0)return;
							bindDept();
						});
					});
					//通过部门ID获取对应部门的职位
					$("#dept").change(function(){
						 var deptId=$(this).val();
						 if(deptId!=0){
						 	$("#position").removeAttr("disabled");
							
							bindPosition(deptId);
							
						}else{
							$("#position").attr("disabled",'disabled');
						}
						
					});
					
					/* $("#user-modal").on('hide.bs.modal',function(){
						return confirm("确认关闭？输入的数据会保留,请勿刷新页面!");
					}); */
				</script>
				
				<script type="text/javascript">
				var email = "";
				var type = "add";
					$(function(){
						//判断邮箱是否存在
						$("input[name=email]").blur(function(){
							var email = $("input[name=email]").val();
							 $.ajax({
									type:"post",
									url:"findEmailExists.action",
									data:{"email":email},
									async:false,
									success:function(result){
										if(result!=null&&result!=""){
											if(type=="add"){
												alert("邮箱已存在！");
												return false;
											}
										}
									},
									error:function(){
										alert("服务器好像开小差了,再试试吧-_-");
									}
								}); 
						});
						//点击提交
						$("#submit_user_form").click(function(){
							if(type=="add"){
								$("#user_form").attr("action","insertUser.action");
							}else{
								$("#user_form").attr("action","updateUser.action");
							}
							$("#user_form").submit();
							
						});
						$(".update-user").click(function(){
							type = "update";
							$.ajax({
								type:"post",
								url:"findEmailExists.action",
								data:{"email":email},
								async:false,
								success:function(user){
									bindIdType();
									bindDept();
									//按职位查询部门
									$.ajax({
										type:"post",
										url:"deptByPid.action",
										data:{"positionId":user.position.positionId},
										success:function(data){
											bindPosition(data.deptId);
											$("select[name=dept]").val(data.deptId);	//部门
										}
									});
									$("#position").removeAttr("disabled");
									$("#identity").removeAttr("disabled");
									$("input[name=name]").val(user.name);				//用户名
									$("input[name=email]").val(user.email);				//邮箱
									if(user.sex=="女"){
										$("#girl").attr("checked","checked");			//性别
									}else{
										$("#boy").attr("checked","checked");
									}
									$("input[name=password]").val(user.password);		//密码
									$("input[name=addres]").val(user.addres);			//地址
									$("input[name=phone]").val(user.phone);				//联系方式
									$("#idType").val(user.idType.idTypeId);				//证件类型
									$("input[name=identity]").val(user.identity);		//证件号码
									$("#userStatu").val(user.userStatu.userStatuId);	//状态
									$("#reamark").val(user.reamark);					//备注
									$("#userId").val(user.userId);						//员工Id
								},
								error:function(){
									alert("服务器好像开小差了,再试试吧-_-");
								}
							});
						});
					});
					$("#add").click(function(){
						type = "add";
					});
					function getEmail(data){
						email = data;
					}
				</script>
				<script src="js/canvas-nest.min.js" count="200" zindex="-2" opacity="0.5" color="47,135,193" type="text/javascript"></script>
</body>
</html>
